<template>
  <div class="dtree-wrap deviceTree">
    <div class="main-title">{{ $t('标签设置') }}</div>
    <div class="ctl-box">
      <bs-add-icon class="hover-effect" @click.native="addTreeNode"></bs-add-icon>
      <bs-remove-icon class="hover-effect" @click.native="removeTreeNode"></bs-remove-icon>
      <bs-edit-icon class="hover-effect" @click.native="editTreeNode"></bs-edit-icon>
      <bs-refresh-icon class="hover-effect shuaxin" @click.native="refreshNode"></bs-refresh-icon>
    </div>
    <bs-tree
      ref="asyncTree"
      :default-props="defaultProps"
      :default-checked-keys="defaultCheckedKeys"
      :default-expanded-keys="defaultExpandedKeys"
      :show-checkbox="false"
      :draggable="false"
      :filter-visible="false"
      :context-menu-visible="false"
      :context-menu-data="contextMenuData"
      :data="treeData"
      :expand-on-click-node="false"
      :highlight-current="true"
      @node-click="nodeClick"
    ></bs-tree>
    <set-tag-type-dialog @refresh="refreshNode"></set-tag-type-dialog>
  </div>
</template>
<script>
import ScreenApi from '@/api/screen'
import SetTagTypeDialog from './components/SetTagTypeDialog'

export default {
    data() {
        return {
            treeNodeData: {},
            currentNode: {},
            activeName: 'first',
            defaultProps: {
              id: 'id',
              label: "name",
              type: 'type'
            },
            treeData: [],
            defaultTreeData: {
            },
            defaultCheckedKeys: [],
            defaultExpandedKeys: [-1, -2],
            contextMenuData: []
        }
    },
    props: {
        showDeviceIndex: {
          type: Boolean,
          default: true
        },
        queryData: {
            default: {}
        }
    },
    components: {
      SetTagTypeDialog
    },
    created() {
      this.$eventBus.$on('getTreeNode', this.doClickTree);
    },
    beforeDestroy() {
      this.$eventBus.$off('getTreeNode');
    },
    mounted() {
      this.$nextTick(() => {
        this.loadTreeData()
      })
    },
    methods: {
      async loadTreeData() {
        this.treeData = [{
          id: -1,
          name: '系统标签',
          type: 1,
          children: []
        },{
          id: -2,
          name: '用户标签',
          type: 2,
          children: []
        }]
        let params = { 'parentId': 0 }
        let res = await ScreenApi.tagTypesList({type: 1})
        if(res) {
          res.forEach(item => {
            this.treeData[0].children.push(item)
          })
        }
        res = await ScreenApi.tagTypesList({type: 2})
        if(res) {
          res.forEach(item => {
            this.treeData[1].children.push(item)
          })
        }
      },
      refreshNode() {
        this.loadTreeData()
      },
      // 点击节点
      nodeClick(data, node, obj) {
        this.treeNodeData = data
        this.currentNode = node
        this.queryData.type = data.type
        if(data.id > 0) {
          this.queryData.categoryId = String(data.id)
        } else {
          this.queryData.categoryId = '0'
        }
        this.queryData.page = 1
        this.$eventBus.$emit('doList', this.queryData)
      },
      // 添加节点
      async addTreeNode() {
        var arr = Object.keys(this.treeNodeData);
        if(arr.length === 0) {
          this.$alert('提示', '请选择一个标签类别')
          return
        }
        this.$eventBus.$emit('showSetTagTypeDialog', { type : this.treeNodeData.type })
      },
      // 编辑节点
      async editTreeNode() {
        var arr = Object.keys(this.treeNodeData);
        if(arr.length === 0) {
          this.$alert('提示', '请选择一个标签类别')
          return
        }
        if(this.treeNodeData.id === -1 || this.treeNodeData.id === -2) {
          this.$alert('提示', '此节点不允许被操作')
          return
        }
        const params = { id: this.treeNodeData.id, name: this.treeNodeData.name, type : this.treeNodeData.type }
        this.$eventBus.$emit('showSetTagTypeDialog', params)
        this.treeNodeData = {}
      },
      // 删除节点
      async removeTreeNode() {
        var arr = Object.keys(this.treeNodeData);
        if(arr.length === 0) {
          this.$alert('提示', '请选择一个标签类别')
          return
        }
        if(this.treeNodeData.id === -1 || this.treeNodeData.id === -2) {
          this.$alert('提示', '此节点不允许被操作')
          return
        }
        const bool = await this.$confirm('提示', '是否确认删除？')
        if(bool) {
          const params = { 'id': this.treeNodeData.id }
          const res = await ScreenApi.deleteTagTypes(params)
          
          this.refreshNode()
          this.treeNodeData = {}
          this.$success('del')
          
        }
      }
    }
}
</script>

<style lang="scss" scoped>
// import '@/styles/bs-common.scss';

.deviceTree {
  width: 100%;
  .el-tabs--border-card {
    border: 0 !important;
  }
  ::v-deep .el-tabs--border-card .el-tabs__content {
    border: 0 !important;
  }
}
.ctl-box {
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 13px 0 13px 0;
  border-bottom: 1px solid $bg-dc;
}
.shuaxin{color:red；}
.dtree-wrap {
  ::v-deep .el-tabs__item{padding:0 !important; width:125px; text-align:center;}
  ::v-deep .el-tabs__item:last-child{border-right:0 !important;}
}
</style>